<template>
    <div class="recommendPage">
        <div class="scroll-nav-wrapper" v-show="!hideNav">
            <slot name="left"></slot>
            <div class="scroll-nav">
                <div
                    v-for="item in handleredNavs"
                    :key="item.key"
                    :class="{ active: item.key === current }"
                    @click="handlerNavClick(item)"
                >
                    {{ item.title }}
                </div>
                <div class="swiper-scrollbar"></div>
            </div>
            <slot name="right"></slot>
        </div>
        <slot></slot>
        <swiper :options="swiperOption" ref="mySwiper" @ready="handlerReady">
            <swiper-slide v-for="item in handleredNavs" :key="item.key">
                <slot :name="item.key"></slot>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
// 引入插件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
// import "swiper/dist/css/swiper.css";

export default {
    name: 'ScrollSwiper',
    components: {
        Swiper,
        SwiperSlide,
    },
    data() {
        return {
            mySwiper: null,
        };
    },
    methods: {
        handlerReady(swiper) {
            this.mySwiper = swiper;
        },
        $_slideChange() {
            if (this.mySwiper) {
                console.log('this.mySwiper', this.mySwiper);
                this.$emit('input', this.handleredNavs[this.mySwiper.activeIndex].key);
            }
        },
        handlerNavClick(item) {
            if (!this.disabled) {
                this.$emit('input', item.key);
            }
        },
    },
    props: {
        value: [Number, String],
        navs: {
            type: Array,
            default() {
                return [];
            },
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        hideNav: {
            type: Boolean,
            default: false,
        },
        autoHeight: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        value: {
            immediate: true,
            handler(val) {
                this.$nextTick(() => {
                    this.mySwiper.slideTo(val);
                });
            },
        },
    },
    computed: {
        current: {
            set(val) {
                this.$emit('input', val);
            },
            get() {
                const index = this.handleredNavs.findIndex((item) => item.key === this.value);
                if (this.mySwiper && index !== this.mySwiper.activeIndex) {
                    this.mySwiper.slideTo(index);
                }
                return this.value;
            },
        },
        handleredNavs() {
            return this.navs.map(({ key, ...item }, index) => {
                return {
                    ...item,
                    key: key === undefined ? index : key,
                };
            });
        },
        swiperOption() {
            return {
                initialSlide: this.handleredNavs.findIndex((item) => item.key === this.value),
                on: {
                    slideChange: this.$_slideChange,
                },
                allowTouchMove: !this.disabled,
                scrollbar: {
                    el: '.swiper-scrollbar',
                    dragEl: '.swiper-scrollbar-drag',
                },
                autoHeight: this.autoHeight,
            };
        },
    },
    mounted() {
        // current swiper instance
        // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
        console.log('this is current swiper instance object', this.swiper);
        // this.swiper.slideTo(3, 1000, false);
    },
};
</script>
<style scoped lang="scss">
.recommendPage .swiper-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 100px);
    /* background: pink; */
}
.recommendPage .swiper-container .swiper-slide {
    width: 100%;
    height: 100%;
    /* background: yellowgreen; */
    color: #000;
    font-size: 16px;
    text-align: center;
}

.scroll-nav-wrapper {
    display: flex;
    background: rgba(255, 255, 255, 1);
}

.scroll-nav {
    flex: 1;
    position: relative;
    display: flex;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    & > div {
        flex: 1;
        &.active {
            color: #f84848;
            transition: color 0.3s;
        }
    }
}
.swiper-scrollbar {
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 100%;
    height: 5px;
    background: transparent;
    ::v-deep .swiper-scrollbar-drag {
        background: transparent;
        position: relative;
        &:after {
            content: '';
            position: absolute;
            width: 20px;
            height: 5px;
            top: 0;
            left: 50%;
            margin-left: -10px;
            background: url('')
                no-repeat center center;
            background-size: contain;
        }
    }
}
</style>
